<template>
  <div class="box" id="app">
    <section class="regis">
      <div class="title">
        <h3>{{ classificationTitle }}</h3>
      </div>
      <div class="box3">
        <div class="box1">
          <div class="input">
            <!-- <img src="../images/用户.png" style="width: 30px;height: 30px;"> -->
            <span class="ipttext">用户名</span>
            <input
              v-model="user.username"
              class="username"
              placeholder="请输入您的用户名"
              style="border: 0; width: 100%"
              required
            />
          </div>
          <div class="input">
            <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
            <span class="ipttext">密 码</span>
            <input
              v-model="user.password"
              class="password"
              id="password"
              placeholder="请输入您的密码"
              style="border: 0; width: 100%"
              type="password"
              required
            />
          </div>
          <div class="input">
            <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
            <span class="ipttexts">确认密码</span>
            <input
              v-model="psw"
              class="password"
              id="password"
              placeholder="请再次确认您的密码"
              style="border: 0; width: 100%"
              type="password"
              required
            />
          </div>
          <div class="register" @click="register">
            <img
              src="./images/register.png"
              alt=""
              style="width: 20px"
              class="regimg"
            />
            <button type="submit" class="regbtn" id="button">注册</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      user: {
        username: "",
        password: "",
      },
      psw: "",
      classificationTitle: "",
    };
  },
  methods: {
    register() {
      if (
        this.user.password === this.psw &&
        this.username != "" &&
        this.user.password != ""
      ) {
        axios({
          url: "http://localhost:3002/competition/user/reguser",
          method: "post",
          data: this.user,
        }).then((res) => {
          if (res.success === true) {
            alert("注册成功");
          } else {
            alert(res.data.msg);
          }
        });
      } else {
        alert("用户名或密码错误，请重新输入");
      }
    },
  },
  mounted() {
    this.classificationTitle = this.$route.params.title; // 获取路由参数-赛事标题
  },
};
</script>

<style>
body {
  margin: 0;
}

.regis {
  position: absolute;
  top: 25%;
  left: 40%;
  margin: 0;
  vertical-align: middle;
}

.title {
  color: #fff;
  margin: 0;
  margin-bottom: 25px;
  letter-spacing: 3px;
}

.box {
  position: relative;
  text-align: center;
  height: 100vh;
  /* background: url('../images/userBGR.jpg'); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.box1 {
  /* background-color: rgb(78, 127, 234); */
  background: linear-gradient(#fff, rgb(78, 127, 234));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  width: 350px;
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
  padding: 10px 0px;
}

.register {
  width: 85px;
  height: 60px;
  border-radius: 100% 4px 0 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: rgba(220, 38, 38, 0.2);
  cursor: pointer;
}

.regimg {
  width: 15px;
  height: 20px;
  margin-left: 20px;
  margin-top: 3px;
}

.regbtn {
  width: 50px;
  height: 20px;
  font-size: 15px;
  margin-top: 3px;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
}

.input {
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
}

.ipttext {
  /* word-spacing: 2px; */
  letter-spacing: 5px;
  font-size: 15px;
  width: 100px;
  padding: 5px 2px;
  background-color: rgb(45, 119, 231);
  color: #fff;
  /* background-color: aquamarine; */
}

.ipttexts {
  font-size: 15px;
  width: 100px;
  padding: 5px 2px;
  background-color: rgb(45, 119, 231);
  color: #fff;
}

.box3 {
  display: flex;
  flex-direction: column;
}

.text1 {
  color: #fff;
  margin: 0 auto;
  transform: translateX(50%);
}

.register {
  background: linear-gradient(rgb(78, 127, 234), rgb(8, 50, 141));
}
</style>